<template>
  <el-card style="overflow-y:auto;overflow-x:hidden;">
    <div slot="header" class="clearfix">
      <span>班别</span>
      <el-tag
        style="margin-bottom: -5px;"
        v-show="title"
        effect="dark">
        {{ title }}
      </el-tag>
    </div>
    <div>
      <el-table
        :height="tableHeight"
        :max-height="tableHeight"
        @cell-click="clazzHandle"
        :data="data"
        :cell-style="()=>{return 'color: #0EA5E9;'}"
        border
        style="width: 100%">
        <el-table-column
          align="center"
          prop="clazzShowWithStudentCount"
          label="班号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="chargerName"
          label="班主任">
        </el-table-column>
        <el-table-column
          align="center"
          label="激活">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.actived"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "ClazzForm",
  props: {
    data: Array,
    title: String,
  },
  data() {
    return {
      tableHeight: window.innerHeight - 220,
    }
  },
  methods: {
    clazzHandle(row, column) {
      if (column.label == "班号") {
        this.$emit('clazz-student', row)
      } else if (column.label == "班主任") {
        console.log(row)
      }
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
